import { Button, Image, Stack, Text } from '@chakra-ui/react';

const topProduct = {
  name: 'iPhone X',
  price: 950,
  imageUrl: 'https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?auto=format&fit=crop&w=400&q=80',
};

const TopProduct = () => (
  <Stack
    border="2px solid"
    borderColor="blue.100"
    rounded="2xl"
    bg="white"
    p={5}
    spacing={4}
    align="center"
    shadow="sm"
  >
    <Text fontSize="sm" fontWeight="600" color="green.500" textTransform="uppercase">
      Top Product
    </Text>
    <Image
      src={topProduct.imageUrl}
      alt={topProduct.name}
      borderRadius="xl"
      width="200px"
      objectFit="cover"
      boxShadow="md"
    />
    <Text fontWeight="600">{topProduct.name}</Text>
    <Text fontSize="lg" color="pink.600">
      ${topProduct.price.toLocaleString()}
    </Text>
    <Button colorScheme="green" width="100%">
      View
    </Button>
  </Stack>
);

export default TopProduct;
